<script setup lang="ts">
import { ref, reactive, shallowRef, onBeforeMount } from 'vue'
import accessControl from './components/accessControl.vue'
import anomalyDectection from './components/anomalyDectection.vue'
import fanAndSolenoid from './components/fanAndSolenoid.vue'
import gasSensor from './components/gasSensor.vue'
import houseEnvironment from './components/houseEnvironment.vue'
import vav from './components/VAV.vue'

</script>

<template>
    <div class="big-screen-view">
        <el-row style="height: 5%;">
            <el-col :span="24" style="height: 100%; font-size: 22px;">
                <div style="text-align: center;">国马斯尔福实验室</div>
            </el-col>
        </el-row>
        <el-row style="height: 95%;" :gutter="10">
            <el-col :span="4" style="height: 100%;">
                <anomalyDectection />
            </el-col>
            <el-col :span="14" style="height: 100%;">
                <vav />
            </el-col>
            <el-col :span="6" style="height: 100%;">
                <el-row style="height: 25%;">
                    <accessControl />
                </el-row>
                <el-row style="height: 50%;">
                    <gasSensor />
                </el-row>
                <el-row style="height: 25%;">
                    <houseEnvironment />
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<style lang="scss" scoped>
.big-screen-view {
    width: 100%;
    height: 100vh;
    border: 1px solid black;
    background-color: #fff;
    background-image: url(@/assets/images/bg01.png);
    // background-position: center;
    background-size: cover;
    color: white;
    padding: calc(100vw * 0.01);
}
</style>